import { CalendarCard, Button, Space } from '@nutui/nutui-react-taro';
import type { CalendarCardProps } from '@nutui/nutui-react-taro/dist/types/packages/calendarcard/calendarcard.taro';
import type { CalendarCardValue } from '@nutui/nutui-react-taro/dist/types/packages/calendarcard/types';
import type { FC } from 'react';
import { View } from '@tarojs/components';
import { useState } from 'react';
import './index.scss';
interface CalendarCardSelectProps
  extends Omit<Partial<CalendarCardProps>, 'onChange'> {
  onOk?: (value: CalendarCardValue) => void;
  onCancel?: () => void;
}

const PREFIX_CLS = 'm-calendar-card-select';
const CalendarCardSelect: FC<CalendarCardSelectProps> = ({
  onOk,
  onCancel,
  ...rest
}) => {
  const [innerValue, setInnerValue] = useState<CalendarCardValue>(
    rest.value as CalendarCardValue,
  );
  const onChange = (value: CalendarCardValue) => {
    setInnerValue(value);
  };

  return (
    <View className={PREFIX_CLS}>
      <CalendarCard {...rest} onChange={onChange} value={innerValue} />
      <Space className={`${PREFIX_CLS}-footer`}>
        <Button size="xlarge" onClick={onCancel}>
          取消
        </Button>
        <Button
          type="primary"
          size="xlarge"
          onClick={() => {
            onOk?.(innerValue);
          }}
        >
          确定
        </Button>
      </Space>
    </View>
  );
};

export default CalendarCardSelect;
